<template>
<a-breadcrumb :routes="routes" class="page-header">
  <template slot="itemRender" slot-scope="{route, params, routes, paths}">
    <span v-if="routes.indexOf(route) === routes.length - 1">
      {{route.meta.title}}
    </span>
    <span v-else :to="paths.join('/')">
      {{route.meta.title}}
    </span>
  </template>
</a-breadcrumb>
</template>
<script>
  export default {
    data(){
      return {
        routes: this.$route.matched
      }
    },
    methods:{
    },
    watch: {
        $route () {
        this.routes=this.$route.matched;
        }
    }
  }
</script>

<style lang="less" scoped>
.page-header {
    margin: -38px -28px 0px;
    background: #fff;
    padding: 16px 32px;
    border-top: 4px solid #f0f2f5;
    border-bottom: 20px solid #f0f2f5;
    }
</style>

